<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>brownie-calendar</title>
<script language="javascript" type="text/javascript" src="../../lib/prototype.js" ></script>
<script language="javascript" type="text/javascript" src="../../src/logger.js" ></script>
<script language="javascript" type="text/javascript" src="../../src/prototype_ext.js" ></script>
<script language="javascript" type="text/javascript" src="../../src/date.js" ></script>
<script language="javascript" type="text/javascript" src="../../src/calendar.js" ></script>
</head>
<body>

<div>
  <div style="float:left;margin:10px;">
	Calendar: <input type="text" id="simpleCalendarField1"/><br/>
	<table>
	   <tr><td>[Ctrl+LEFT]</td><td>prev date</td></tr>
	   <tr><td>[Ctrl+RIGHT]</td><td>next date</td></tr>
	   <tr><td>[Ctrl+UP]</td><td>prev week</td></tr>
	   <tr><td>[Ctrl+DOWN]</td><td>next week</td></tr>
	   <tr><td>[PAGE_UP]</td><td>prev month</td></tr>
	   <tr><td>[PAGE_DOWN]</td><td>next month</td></tr>
	   <tr><td>[Ctrl+PAGE_UP]</td><td>prev year</td></tr>
	   <tr><td>[Ctrl+PAGE_DOWN]</td><td>next year</td></tr>
	</table>
  </div>
  <div id="calendarDiv1" style="float:left;margin:10px;"></div>
  <div style="clear:left;"></div>
</div>

<script language="javascript" type="text/javascript" ><!--
Logger.setActiveOnLoad(true);

var model1 = new Date.Calendar.Model();
new Date.Calendar.KeyController($("simpleCalendarField1"), model1);
var view = new Date.Calendar.View( $("calendarDiv1"), {"model":model1} );

new Date.Calendar.ViewController(view);
--></script>


<div>
  <div style="float:left;margin:10px;">
	Calendar2: <input type="text" id="calendarField2"/><br/>
	Calendar3: <input type="text" id="calendarField3"/><br/>
  </div>
  <div id="calendarDiv2" style="float:left;margin:10px;"></div>
  <div style="clear:left;"></div>
</div>

<script language="javascript" type="text/javascript" ><!--
var model2 = new Date.Calendar.Model();
var model3 = new Date.Calendar.Model();
new Date.Calendar.KeyController($("calendarField2"), model2);
new Date.Calendar.KeyController($("calendarField3"), model3);

var view = new Date.Calendar.View( $("calendarDiv2"), {"model":model1} );
var viewController = new Date.Calendar.ViewController(view);

Event.observe($("calendarField2"), "focus", function(event){ 
    view.switchModel(model2);
    viewController.model = model2;
    view.update();
});
Event.observe($("calendarField3"), "focus", function(event){ 
    view.switchModel(model3);
    viewController.model = model3;
    view.update();
});
--></script>


<div>
PullDownCalendar: <input type="text" id="calendarField1" value="2005/6/1"/>
</div>

<script language="javascript" type="text/javascript" ><!--

new Date.Calendar.PullDown($("calendarField1"), { closeOnClick: true, closeOnDblClick: false });

--></script>

<div>
    <input type="text" id="calendarField2" value="2004/6/9"/><br/>
    <input type="text" id="calendarField3" value="2005/1/22"/><br/>
    <input type="text" id="calendarField4" value="2006/12/31"/><br/>
</div>
<script language="javascript" type="text/javascript" ><!--
new Date.Calendar.PullDown($("calendarField2"), { closeOnClick: true, closeOnDblClick: false });
new Date.Calendar.PullDown($("calendarField3"), { closeOnClick: false, closeOnDblClick: false });
new Date.Calendar.PullDown($("calendarField4"), { closeOnClick: false, closeOnDblClick: true });

--></script>


</body>
</html>